<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>APP用户管理</title>
    <%@ include file="/WEB-INF/layouts/index-header.jsp" %>

    <script src="http://at.alicdn.com/t/font_477528_s2lwv9qqtw72pgb9.js"></script>
    <style type="text/css">
        .wrapper-content {
            padding: 20px;
            background: #f3f3f4;
            font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 13px;
            color: #676a6c;
        }

        .contact-box {
            background-color: #fff;
            border: 1px solid #e7eaec;
            padding: 20px;
            margin-bottom: 20px;
            cursor: pointer;
        }

        .contact-box:hover {
            border-color: #d8dbdd;
            background: #FCFCFC;
        }

        .contact-box a {
            color: inherit;
        }

        a {
            cursor: pointer;
        }

        .m-t-xs {
            margin-top: 5px;
        }

        .img-circle {
            border-radius: 50%;
        }

        .m-t-xs {
            margin-top: 5px;
        }

        .font-bold {
            font-weight: 600;
        }

        h3, h4, h5 {
            margin-top: 5px;
            font-weight: 600;
        }

        h3 {
            font-size: 16px;
        }

        .myOverflow {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            margin-top: 5px;
        }

        .icon {
            width: 2em;
            height: 2em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .myImageVertical {
            vertical-align: middle;
            display: inline-block;
        }
    </style>
    <script src="${staticPath}/admin/lib/bootstrap-paginator/bootstrap-paginator.min.js"></script>
</head>
<body>
<div class="tpanel">
    <div class="panel-content">
        <div class="container-fluid">
            <div id="tool">
                <form id="searchForm" class="form-inline" onsubmit="return searchUser()"
                      style="margin-top:20px;margin-bottom:20px;">
                    <div class="form-group">
                        <label class="">用户名：</label>
                        <input type="text" name="search_LIKES_username" class="form-control" />
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary radius">
                            <span class="glyphicon glyphicon-search"></span>
                            查询
                        </button>
                        <a class="btn btn-success radius" href="${ctx}/admin/app-user/create">
                            <span class="glyphicon glyphicon-cog"></span>
                            创建用户
                        </a>
                    </div>
                </form>
            </div>


            <div class="wrapper wrapper-content animated fadeInRight">
                <div id="userBoxWrapper" class="row">

                </div>
                <div class="row">
                    <div class="col-sm-4" style="text-align:left;line-height: 30px;">
                        共
                        <span id="total">0</span>
                        个用户
                    </div>
                    <div class="col-sm-8" style="text-align:right;">
                        <ul id="paginator"></ul>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>


<script type="text/javascript">
    changeTitle('APP用户管理');

    function searchUser() {
        load(1);
        $('#paginator').bootstrapPaginator("showFirst");
        return false;
    }

    function load(page) {
        $.getJSON('${ctx}/admin/app-user/page-list?page=' + page + '&size=9', $('#searchForm').serializeObject(), function (resp) {
            if (resp.code == 'OK') {
                $('#paginator').bootstrapPaginator("setOptions", {totalPages: resp.body.pageTotal});
                $('#total').text(resp.body.total);
                var html = '';
                for (var i in resp.body.rows) {
                    var row = resp.body.rows[i];
                    html += '<div class="col-sm-4">';
                    html += '<div class="contact-box" onclick="detail(' + row.id + ')">';
                    html += '<div class="col-sm-4">';
                    html += '<div class="text-center">';
                    html += '<img alt="image" class="img-circle m-t-xs img-responsive myImageVertical"';
                    html += 'src="${staticPath}/app/image/default_headimg.jpg"/>';
                    if (row.role === 'Admin') {
                        html += '<div class="m-t-xs font-bold">管理员</div>';
                    } else {
                        html += '<div class="m-t-xs font-bold">普通用户</div>';
                    }
                    if (row.gender == 'Male') {
                        html += '<svg class="icon" aria-hidden="false"><use xlink:href="#icon-xingbienan"></use></svg>';
                    } else if (row.gender == 'Female') {
                        html += '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xingbienv"></use></svg>';
                    }
                    html += '</div>';
                    html += '</div>';
                    html += '<div class="col-sm-8">';
                    html += '<h3 class="myOverflow" style="font-weight: bold">' + row.realName + '</h3>';
                    html += '<div class="myOverflow" style="margin-bottom: 5px" title="' + row.username + '">' + row.username + '</div>';
                    html += '<address>';
                    html += '<strong>暂无位置信息</strong><br>';
                    if (row.tel) {
//                        html += '<lable>电话:</lable> ' + row.tel + '<br/>';
                        html += '<div class="myOverflow">电话: ' + row.tel + '</div>';
                    } else {
                        html += '<div class="myOverflow">暂无电话信息<br/>';
                    }
                    if (row.email) {
//                        html += '<lable >邮箱:</lable> <span class="myOverflow">' + row.email + "</span>";
                        html += '<div class="myOverflow" title="' + row.email + '">邮箱: ' + row.email + '</div>';
                    } else {
                        html += '<div class="myOverflow">暂无邮箱信息</div>';
                    }
                    html += '</address>';
                    html += '</div>';
                    html += '<div class="clearfix"></div>';

                    html += '</div>';
                    html += '</div>';
                }
                $('#userBoxWrapper').html(html);
            }
        });
    }

    function detail(id) {
        changeUrl('${ctx}/admin/app-user/detail?id=' + id);
    }

    $(function () {
        $('#paginator').bootstrapPaginator({
            currentPage: 1,
            totalPages: 1,
            size: "normal",
            bootstrapMajorVersion: 3,
            alignment: "right",
            numberOfPages: 5,
            onPageClicked: function (event, originalEvent, type, page) {
                load(page);
            },
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "末页";
                    case "page":
                        return page;
                }
            }
        });
        $('#paginator').bootstrapPaginator("showFirst");
        load(1);
    });
</script>
</body>
</html>
